<template>
    <div class="demo">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
// export default Vue.extend({
//     data() {
//         return {
//             schoolName: '赛博坦高等学校',
//             address: '赛博坦'
//         }
//     },
//     methods: {
//         showName() {
//             alert(this.schoolName)
//         }
//     }
// })
// 注意:Vue.extend可以简写为对象形式
export default {
    name: 'School',
    data() {
        return {
            name: '赛博坦高等学校',
            address: '赛博坦'
        }
    },
    methods: {
        showName() {
            alert(this.name)
        }
    }
}
</script>

<style>
.demo {
    background-color: orange;
}
</style>